{% extends 'TopxiaWebBundle::bootstrap-modal-layout.html.twig' %}

{% set modal_class = 'modal-lg' %}

{% block title %}上传文件{% endblock %}

{% block body %}
  <style>
    .webuploader-container {
      position: relative;
    }
    .webuploader-element-invisible {
      position: absolute !important;
      clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
      clip: rect(1px,1px,1px,1px);
    }
    .webuploader-pick {
      position: relative;
      display: inline-block;
      cursor: pointer;
      background: #fff;
      padding: 5px 10px;
      color: #333;
      text-align: center;
      border-radius: 3px;
      border: 1px solid #ccc;
      overflow: hidden;
    }
    .webuploader-pick-hover {
      background: #e6e6e6;
      border-color: #adadad;
    }

    .webuploader-pick-disable {
      opacity: 0.6;
      pointer-events:none;
    }

    .balloon-uploader {
      border: 1px solid #ddd;
      border-radius: 4px;
    }

    .balloon-uploader-heading {
      background-color: #f5f5f5;
      color: #333;
      padding: 10px 15px;
      border-bottom: 1px solid #ddd;
      display: none;
    }

    .balloon-uploader-footer {
      background-color: #f5f5f5;
      color: #333;
      padding: 10px 15px;
      border-top: 1px solid #ddd;
      text-align: right;
    }

    .balloon-filelist {
      width: 100%;
    }

    .balloon-filelist-heading {
      padding: 8px 10px;
      font-weight: bold;
      border-bottom: 2px solid #ddd;
    }

    .balloon-uploader-body {
      position: relative;

    }

    .balloon-filelist .file-name,
    .balloon-filelist .file-size,
    .balloon-filelist .file-status,
    .balloon-filelist .file-manage {
      position: relative;
      z-index: 1;
    }

    .balloon-filelist .file-name {
      display: inline-block;
      width: 40%;
    }

    .balloon-filelist .file-size {
      display: inline-block;
      width: 20%;
    }

    .balloon-filelist .file-status {
      display: inline-block;
      width: 18%;
    }
    .balloon-filelist .file-manage {
      display: inline-block;
      z-index: 9999;
      position: absolute;
    }


    .balloon-filelist ul {
      list-style: none;
      margin: 0;
      padding: 0;
      min-height: 200px;
      max-height: 300px;
      overflow-y: scroll;
    }

    .balloon-filelist ul li {
      position: relative;
      border-bottom: 1px solid #ddd;
      padding: 8px 10px;
    }

    .balloon-dnd {
      visibility: hidden;
    }

    .balloon-uploader-none .balloon-uploader-footer,
    .balloon-uploader-none .balloon-uploader-body {
      visibility: hidden;
    }

    .balloon-uploader-none .balloon-dnd {
      visibility: visible;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      text-align: center;
      vertical-align: middle;
    }

    .balloon-nofile {
      position: absolute;
      top: 40px;
      left: 0;
      right: 0;
      bottom: 0;
      line-height: 200px;
      text-align: center;
      color: #999;
    }

    .balloon-uploader .file-pick-btn {
      display: inline-block;
    }

    .balloon-uploader .pause-btn{
      display: inline-block;
      margin-top: -25px;
    }

    .balloon-uploader .start-upload-btn {
      position: relative;
      display: inline-block;
      cursor: pointer;
      background: #5bc0de;
      padding: 5px 10px;
      color: #fff;
      text-align: center;
      border-radius: 3px;
      border: 1px solid #46b8da;
      overflow: hidden;
    }

    .balloon-uploader .start-upload-btn:hover {
      background: #31b0d5;
      border-color: #269abc;
    }

    .balloon-filelist .file-progress {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .balloon-filelist .file-progress-bar {
      background: rgb(219,242,215);
      background: rgba(59, 181, 33, 0.18);
      float: left;
      height: 100%;
    }

  </style>
{% set single_file_size = setting('cloud_attachment.fileSize') %}
  <div class="hidden">
    {% include 'TopxiaWebBundle:CloudFile:video-quality-switcher.html.twig' %}
  </div>
  <div class="balloon-uploader" id="batch-uploader"
       data-init-url="{{ path('uploader_init', {token:token}) }}"
       data-finish-url="{{ path('uploader_finished', {token:token}) }}"
       data-upload-auth-url = "{{ path('uploader_auth', {token:token}) }}"
       data-accept="{{ uploader_accept('attachment')|json_encode }}"
       data-process="{{ uploader_process(targetType) }}"
       data-ids-class="{{idsClass}}"
       data-list-class="{{listClass}}"
       data-file-single-size-limit="{{ setting('cloud_attachment.fileSize',0) == 0  ? 2048 * 1024 * 1024 : setting('cloud_attachment.fileSize')*1024*1024  }}"
  >
    <div class="balloon-uploader-heading">上传文件</div>
    <div class="balloon-uploader-body">
      <div class="balloon-nofile">请将文件拖到这里，或点击添加文件按钮</div>
      <div class="balloon-filelist">
        <div class="balloon-filelist-heading">
          <div class="file-name">文件名</div>
          <div class="file-size">大小</div>
          <div class="file-status">状态</div>
        </div>
        <ul>
        </ul>
      </div>
    </div>
    <div class="balloon-uploader-footer">
      <div class="file-pick-btn"><i class="glyphicon glyphicon-plus"></i> 添加文件</div>
      <div class="start-upload-btn"><i class="glyphicon glyphicon-upload"></i> 开始上传</div>
    </div>
  </div>

  {% if setting('storage.upload_mode', 'local') == 'cloud'  %}
    <div class="alert alert-info">
      <ul>
        <li>支持PPT/PPTX,DOC/DOCX,XLS/XLSX、MP3/MP4/FLV、PDF、RAR格式的文件上传，单个文件大小不能超过<strong>{{setting('cloud_attachment.fileSize')}}MB</strong>。</li>
        <li>支持<strong>断点续传</strong>（仅支持HTML5浏览器）。</li>
      </ul>
    </div>
  {% else %}
    <div class="alert alert-info">
      <ul>
        <li>支持<strong>mp4, mp3</strong>格式的文件上传，且文件大小不能超过<strong>2{{setting('cloud_attachment.fileSize')}}MB</strong>。<br>MP4文件的视频编码格式，请使用AVC(H264)编码，否则浏览器无法播放。</li>
        <li>视频将上传到<strong>网站服务器</strong>，如需使用云视频,点击<a href="http://open.edusoho.com/show/cloud/video" target="_blank">这里</a>了解详情。</li>
      </ul>
    </div>
  {% endif %}

  <script>app.load('topxiawebbundle/controller/attachment/upload-modal')</script>
{% endblock %}
{% block footer %}
  <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
{% endblock %}

